<template>
  <div class="order-container">


    <div class="box">

      <div class="header">
        <div class="tvc index">索引</div>
        <div class="tvc id">主键</div>
        <div class="tvc title">标题</div>
      </div>
      <draggable v-model="myDataList" @update="update">
        <div v-for="(obj,i) in myDataList" :key="obj.id">
          <div class="content-box">
            <div class="tvc index">{{ i + 1 }}</div>
            <div class="tvc id">{{ obj.id }}</div>
            <div class="tvc title">{{ obj.title }}</div>
          </div>
        </div>
      </draggable>

    </div>


  </div>
</template>

<script>
/**
 * 使用方式
 * import Order from "@/views/common/Order"
 * components: {Order},
 * <Order :dataList="dataList" @my-event-order-list="getOrderList"></Order>
 * dataList格式如下，对象属性 id 和 title
 * [
 * {id: "1", title: "我是1号"},
 * {id: "2", title: "我是2号"},
 * {id: "3", title: "我是3号"},
 * ]
 * getOrderList(data) data属性如下
 * {
 *   dataList:[], 排序过后的 dataList
 *   idList:[],排序过后的 idList
 * }
 */
import draggable from 'vuedraggable'

export default {
  //组件名称
  name: "Order",
  props: ["dataList"],
  //组件注册
  components: {draggable},
  //数据驱动
  data() {
    return {
      myDataList: [],  //数据列表
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    update() {
      let idList = []
      for (let i = 0; i < this.myDataList.length; i++) {
        idList.push(this.myDataList[i].id)
      }
      this.$emit("my-event-order-list", {
        dataList: this.myDataList,
        idList: idList,
      })
    }
  },
  //钩子函数
  mounted() {
    if (typeof (this.dataList) != 'undefined') {
      this.myDataList = this.dataList;
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  display: flex;

  div {
    font-size: 18px;
    color: #000;
    font-weight: bolder;
  }
}

.content-box {
  background-color: #FFF;
  height: 26px;
  line-height: 26px;
  border-radius: 4px;

  margin-top: 4px;
  display: flex;
}

.index {
  width: 100px;
  border: 1px solid #dbd9d9;
}

.id {
  width: 200px;
  border: 1px solid #dbd9d9;
}

.title {
  text-align: left;
  width: calc(100% - 300px);
  padding-left: 14px;
  border: 1px solid #dbd9d9;
}
</style>